 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         body {
             background-color: aqua;
         }
         *{
             padding: 0;
             list-style: none;
         }
         .frame {
             background-color: wheat;
             width: 800px;
             height: 500px;
             margin: 0 auto;
             border-radius: 15px;
             text-align: center;
         }
         h1 {
             top: 0;
             left: 0;
             text-align: center;
         }
         .list1 {
             text-align: center;
         }
         .list1 > input {
             height: 35px;
             width: 350px;
             margin: 0 0 10px 0;
         }
         .list1 >button {
             background-color: skyblue;
             height: 40px;
             width: 100px;
             border-radius: 0.25rem;
             color: white;
             cursor: pointer;
             border: 1px solid #d1d5db;
         }
         .list2 {
             text-align: center;
         }
         .list2 > input {
             height: 35px;
             width: 325px;
             
         }
         .list2 >button {
             background-color: skyblue;
             height: 40px;
             width: 125px;
             border-radius: 0.25rem;
             border: 1px solid #d1d5db;
             color: white;
             cursor: pointer;
         }
        .list {
            margin: 20px 0 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .list3 {
            border: 1px solid white;
            height: 200px;
            width: 200px;
            border-radius: 0.25rem;
        }
        .list4 {
            border: 1px solid white;
            height: 200px;
            width: 200px;
            border-radius: 0.25rem;
            margin: 0 0 0 30px;
        }
        #start {
            background-color: skyblue;
             height: 40px;
             width: 125px;
             border-radius: 0.25rem;
             color: white;
             cursor: pointer;
             border: 1px solid #d1d5db;
        }
        #end {
            background-color: rgb(169,169,169);
             height: 40px;
             width: 125px;
             border-radius: 0.25rem;

             color: white;
             cursor: pointer;
             border: 1px solid #d1d5db;
        }
    </style>
</head>
<body>
    <div class="frame">
        <h1>滚动抽奖系统</h1>
        <div class="list1">
            <input type="text" id="input1" placeholder="请输入奖品">
            <button id="app1">+设置奖品</button>
        </div>
        <div class="list2">
            <input type="text" id="input2" placeholder="请输入参与人员">
            <button id="app2">+设置参与人员</button>
        </div>
        <div class="list">
            <div class="list3">
            <span>奖品列表</span>
            <ul id="app3"></ul>
        </div>
        <div class="list4">
            <span>参与人员列表</span>
            <ul id="app4"></ul>
        </div>
        </div>
        <div>
            <p id="text1">滚动中:无</p>
            <button id="start">开始</button>
            <button id="end">结束</button>
        </div>
    </div>
    <script>
        const input1= document.getElementById('input1');
        const input2= document.getElementById('input2');
        const app1= document.getElementById('app1');
        const app2= document.getElementById('app2');
        const app3= document.getElementById('app3');
        const app4= document.getElementById('app4');
        const start=document.getElementById('start');
        const end= document.getElementById('end');
        const text1= document.getElementById('text1');
        let price1=[];
        let price2=[];
        app1.addEventListener('click',function(){
            const sum1=input1.value;
            if(sum1){
                price1.push(sum1);
                const li1=document.createElement('li');
                li1.textContent=sum1;
                app3.appendChild(li1);
                input1.value='';
            }
        })
        app2.addEventListener('click',function(){
            const sum2=input2.value;
            if(sum2){
                price2.push(sum2);
                const li2=document.createElement('li');
                li2.textContent=sum2;
                app4.appendChild(li2);
                input2.value='';
            }
        })
        start.addEventListener('click',function(){
            if(price2.length===0&&price1.length===0)
            {
                alert("请输入奖品和参与人员！！！");
                return;
            }
            else if(price1.length===0)
            {
                alert("请输入奖品！！！");
                return;
            }
            else if(price2.length===0)
            {
                alert("请输入参与人员！！！");
                return;
            }
            if(price1.length>0&&price2.length>0)
            {
                n=setInterval(function(){
                    const random=Math.floor(Math.random()*price2.length);
                    text1.innerHTML=`<p>${price2[random]}</p>`
                },100)

            }
        })
        end.addEventListener('click',function(){
            if(price1.length>0&&price2.length>0)
            {
                clearInterval(n);
                const ap1=app3.children;
                const ap2=app4.children;
                const random1=Math.floor(Math.random()*price1.length);
                const random2=Math.floor(Math.random()*price2.length);
                const price3=price1.splice(random1,1)[0];
                const price4=price2.splice(random2,1)[0];
                text1.innerHTML=`<p>恭喜${price4}获得了${price3}</p>`
                app3.removeChild(ap1[random1])
                app4.removeChild(ap2[random2])
            }
        })
    </script>
</body>
</html>